<template>
  <div class="content">
    <div class="group" v-if="tab">
      <div
        :class="btnActived == index + 1 ? 'active' : ''"
        @click="_tabClick(item, index + 1)"
        v-for="(item, index) in tabList"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <div class="rank-content">
      <div class="average-legend" v-if="markLineShow">
        <span></span>
        平均值
      </div>
      <!--//序号-->
      <div class="order" v-if="orderShow">
        <template v-for="(item, index) in data">
          <span :key="index" v-if="index!==0">
            {{index}}
          </span>
        </template>
      </div>
      <div :id="id" :data="data" v-if="show"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    chartTitle: {
      type: Object,
    },
    showLine: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    to: {
      type: String,
    },
    horizontal: {
      type: Boolean,
      default: false,
    },
    barWidth: {
      type: [Number, String],
      default: 10,
    },
    setKey: {
      type: Object,
    },
    showBarTop: {
      type: Boolean,
      default: false,
    },
    splitLabel: {
      type: Boolean,
      default: true,
    },
    labelMax: {
      type: Number,
      default: 5,
    },
    YsplitLine: {
      type: Boolean,
      default: false,
    },
    XsplitLine: {
      type: Boolean,
      default: false,
    },
    tab: {
      type: Boolean,
      default: false,
    },
    tabList: {
      type: Array,
      default: () => {
        return ['7天', '一个月']
      },
    },
    color: {
      type: Array,
      default: () => {
        return ['#3771ef', '#ffa411', '#ffd34d', '#ff4b4c', '#00c6f8', '#c864c5', '#ff50b4', '#ff7900', '#7f8fcb']
      },
    },
    markLineShow: {
      type: Boolean,
      default: false,
    },
    markLineValue: {
      type: [Number, String],
    },
    YLabelSuffix: {
      type: String,
    },
    yName: {
      type: String,
    },
    orderShow: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      id: '',
      btnActived: 1,
      show: true,
    }
  },
  created() {
    this.id = 'rankVerBar-' + Math.random()
  },
  mounted() {
    this.$nextTick(() => {
      this._initBar()
    })
  },
  updated() {
    this.$nextTick(() => {
      this._initBar()
    })
  },

  methods: {
    _tabClick(name, index) {
      this.btnActived = index
      this.$emit('tab-click', name)
    },
    _initBar() {
      let source = []
      let setKey = this.setKey
      if (setKey) {
        for (let i = 0; i < this.data.length; i++) {
          source.push({
            product: this.data[i][setKey.product],
            count: this.data[i][setKey.count],
          })
        }
      } else {
        source = this.data
      }
      let option = {
        title: this.chartTitle,
        tooltip: {
          // trigger: 'axis',
          // axisPointer: {
          //   type: 'shadow'
          // }
        },
        grid: {
          left: this.orderShow?'36px': 0,
          right: this.horizontal && this.showBarTop ? '4%' : '50px',
          bottom: '0',
          top: '0',
          containLabel: false,
        },
        yAxis: {
          type: 'category',
          inverse: true,
          show: false,
        },
        xAxis: [
          {
            show: false,
            axisLine: {
              lineStyle: {
                color: '#999',
              },
            },
            axisLabel: {
              textStyle: {
                  color: '#000',
              }
            }
          },
          {
            show: false,
            axisLine: {
              lineStyle: {
                color: '#999',
              },
            },
            axisLabel: {
              textStyle: {
                  color: '#000',
              }
            }
          },
        ],
        series: [
          //x轴
          {
            type: 'bar',
            barGap: '-100%',
            barWidth: this.barWidth,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#000',
                  fontSize: 12
                },
                position: 'right',
              },
            },
            encode: {
              x: 'nums',
            },
            tooltip: {}
          },
          //y轴
          {
            type: 'bar',
            xAxisIndex: 1, //代表使用第二个X轴刻度
            barGap: '-100%',
            barCategoryGap: '10%' ,
            barWidth: this.barWidth,
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: (params)=> {
                  var colorList = this.color
                  if(colorList.length>0 && colorList.length>1) {
                    return colorList[params.dataIndex]
                  } else {
                    return colorList
                  }
                },
              },
            },
            label: {
              rotate: 40,
              normal: {
                show: true,
                // position: 'insideRight',
                position: [0, '-14'],
                formatter: '{b}',
                textStyle: {
                  fontSize: 12,
                  color: '#4a4b4b',
                },
              },
            },
            encode: {
              y: 'product',
            },
          },
        ],
        dataset: {
          source: source,
        },
      }
      let documentChart = document.getElementById(this.id)
      if (documentChart) {
        this.chart = this.$echarts.init(documentChart)
        this.chart.setOption(option)
      }
      window.addEventListener('resize', () => {
        this.chart.resize()
        this.show = false
        setTimeout(() => {
          this.show = true
        }, 300)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-flow: column;
  // background-color: #009896;

  .rank-content {
    flex: 1;
    position: relative;
    margin-top: 0.926vh;

    .order {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      width: 26px;
      & > * {
        flex: 1;
        background-color: #a8a8a8;
        color: #fff;
        text-align: center;
        position: relative;
        // margin-bottom: 5px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        &:nth-child(1) {
          background-color: #f10000;
        }
        &:nth-child(2) {
          background-color: #ff9502;
        }
        &:nth-child(3) {
          background-color: #7f7f7f;
        }
        &:last-child{
          margin-bottom: 0;
        }
        &::before {
          bottom: 0;
          content: '';
          position: absolute;
          display: inline-block;
          width: 100%;
          height: 5px;
          background-color: #fff;
        }
      }
    }

    .average-legend {
      width: auto;
      height: auto;
      position: absolute;
      display: flex;
      align-items: center;
      right: 0;
      top: 0;
      color: #fff;
      font-size: 1.3vh;
      display: flex;

      span {
        display: inline-block;
        width: 0.926vh;
        height: 0.926vh;
        background-color: #f2637b;
        margin-right: 0.926vh;
      }
    }

    > div {
      width: 100%;
      height: 100%;
    }
  }

  .group {
    display: flex;
    padding: 10px;

    div {
      min-width: 9.722vh;
      padding: 0 10px;
      height: 2.777vh;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-image: url(../../../assets/daping/components/defaultBtn.png);
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      font-size: 1.48vh;
      color: #fff;
      cursor: pointer;
      margin-right: 20px;
    }

    .active {
      // background-image: url(../../../assets/daping/components/activeBtn.png);
      color: #000;
      font-weight: bold;
    }
  }
}
</style>
